<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>

    <style>
      * {
        margin: 0;
        padding: 0;
      }
    </style>
    <style>
      .search-modal {
        height: 400px;
        width: 600px;
        padding: 20px;
        display: none;
        box-shadow: 0 0 10px #ccc;

        position: fixed;
        top: 50%;
        left: 50%;
        margin-left: -300px;
        margin-top: -200px;

        background: #fff;
      }
    </style>
    <style>
      .result-list {
        width: 1190px;
        height: auto;
        overflow: hidden;
        margin: 0 auto;
        background: blue;
      }

      .result-item {
        box-sizing: border-box;
        width: 20%;
        padding: 10px;

        position: relative;
        background: yellow;
        float: left;
      }

      .result-item img {
        width: 100%;
      }
      .result-item p {
        position: absolute;
        bottom: 10px;
        width: calc(100% - 30px);
        background: green;
        padding: 5px;
        color: white;

        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        -o-text-overflow: ellipsis;
      }
    </style>
  </head>
  <body>
    <button id="handleSearch">搜索</button>

    <div class="result-list" id="resultList"></div>

    <div class="search-modal" id="searchModal">
      <div class="search-bar"></div>
      <div class="filter-bar"></div>
      <div class="filter-bar"></div>
      <div class="filter-bar"></div>
    </div>
  </body>

  <script src="./js/jquery.js"></script>

  <script>
    $('#handleSearch').on('click', function () {
      $('#searchModal').show()
    })
  </script>

  <script>
    const initResultList = () => {
      const resultList = Array(12)
        .fill(null)
        .map((item) => ({
          img: './img/default.png',
          title:
            '标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题',
        }))
      const resultDom = resultList
        .map(
          (item) => `<div class="result-item" >
              <img src="${item.img}" alt="">
              <p>${item.title}</p>
            </div>`)
        .join('')

      $('#resultList').html(resultDom)
    }

    initResultList()
  </script>
</html>
